<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{common/base :: layout(~{::title}, ~{::content}, ~{::style}, ~{::script})}">
<head>
    <title>数据统计 - 后台管理系统</title>
    <!-- 引入Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <style th:fragment="style">
        .dashboard-card {
            border-radius: 8px;
            box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
            transition: all 0.3s;
            overflow: hidden;
            margin-bottom: 1.5rem;
        }
        .dashboard-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        }
        .stats-card {
            border: none;
            border-radius: 8px;
            padding: 1.25rem;
            height: 100%;
        }
        .stats-card .icon {
            font-size: 2rem;
            height: 60px;
            width: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.75rem;
        }
        .stats-card .value {
            font-size: 1.75rem;
            font-weight: bold;
            margin-bottom: 0.25rem;
        }
        .stats-card .label {
            font-size: 0.875rem;
            color: #6c757d;
            margin-bottom: 0;
        }
        .chart-container {
            position: relative;
            height: 300px;
            width: 100%;
        }
        .chart-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 1.25rem;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }
        .chart-card-header h5 {
            margin-bottom: 0;
            font-size: 1rem;
            font-weight: 600;
        }
        .chart-card-body {
            padding: 1rem;
        }
        .time-filter {
            display: flex;
            align-items: center;
        }
        .time-filter select {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
            border-radius: 4px;
            border: 1px solid #ced4da;
        }
        .hot-product-item {
            display: flex;
            align-items: center;
            padding: 0.75rem 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }
        .hot-product-item:last-child {
            border-bottom: none;
        }
        .hot-product-image {
            width: 40px;
            height: 40px;
            border-radius: 4px;
            object-fit: cover;
            margin-right: 0.75rem;
        }
        .hot-product-info {
            flex-grow: 1;
        }
        .hot-product-name {
            font-size: 0.875rem;
            font-weight: 600;
            margin-bottom: 0.25rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 150px;
        }
        .hot-product-price {
            font-size: 0.75rem;
            color: #dc3545;
        }
        .hot-product-sales {
            font-size: 0.875rem;
            font-weight: 600;
            margin-left: auto;
            color: #198754;
        }
        .legend-item {
            display: flex;
            align-items: center;
            margin-bottom: 0.5rem;
        }
        .legend-color {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 0.5rem;
        }
        .legend-text {
            font-size: 0.75rem;
            color: #6c757d;
        }
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;
        }
        .content-wrapper {
            max-width: 1400px;
            margin: 0 auto;
            padding: 1.5rem;
        }
        
        /* 自适应调整 */
        @media (max-width: 768px) {
            .stats-card {
                margin-bottom: 1rem;
            }
            .chart-container {
                height: 250px;
            }
        }
        #refreshDashboard {
            min-width: 120px; /* 可以根据实际需要调整这个值 */
            white-space: nowrap;
        }

        #timeRangeSelect {
            min-width: 120px; /* 与按钮保持一致的宽度 */
        }

        /* 如果在移动设备上仍有问题，可以调整按钮组的布局 */
        @media (max-width: 576px) {
            .btn-group {
                display: flex;
                flex-direction: column;
                width: 100%;
            }
            
            #refreshDashboard, #timeRangeSelect {
                width: 100%;
                margin-bottom: 5px;
            }
        }
    </style>
</head>
<body>
    <div th:fragment="content">
        <div class="content-wrapper">
            <!-- 页面标题 -->
            <div class="bg-light p-3 mb-4 dashboard-card">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center">
                    <h2 class="mb-3 mb-md-0 fs-4">数据统计</h2>
                    <div>
                        <div class="btn-group">
                            <button id="refreshDashboard" class="btn btn-outline-primary">
                                <i class="bi bi-arrow-repeat me-1"></i>刷新数据
                            </button>
                            <select id="timeRangeSelect" class="form-select">
                                <option value="7">最近7天</option>
                                <option value="15">最近15天</option>
                                <option value="30">最近30天</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 数据概览卡片 -->
            <div class="row g-3 mb-4" th:if="${overview != null}">
                <!-- 用户统计 -->
                <div class="col-6 col-md-3">
                    <div class="stats-card bg-primary bg-opacity-10">
                        <div class="icon bg-primary bg-opacity-25 text-primary">
                            <i class="bi bi-people"></i>
                        </div>
                        <h3 class="value" th:text="${overview.user.total}">0</h3>
                        <p class="label">总用户数</p>
                        <div class="d-flex justify-content-between mt-3">
                            <div>
                                <small class="d-block text-muted">今日新增</small>
                                <span class="fw-bold text-primary" th:text="${overview.user.new}">0</span>
                            </div>
                            <div>
                                <small class="d-block text-muted">活跃用户</small>
                                <span class="fw-bold text-primary" th:text="${overview.user.active}">0</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 商品统计 -->
                <div class="col-6 col-md-3">
                    <div class="stats-card bg-success bg-opacity-10">
                        <div class="icon bg-success bg-opacity-25 text-success">
                            <i class="bi bi-box-seam"></i>
                        </div>
                        <h3 class="value" th:text="${overview.product.total}">0</h3>
                        <p class="label">总商品数</p>
                        <div class="d-flex justify-content-between mt-3">
                            <div>
                                <small class="d-block text-muted">上架商品</small>
                                <span class="fw-bold text-success" th:text="${overview.product.onSale}">0</span>
                            </div>
                            <div>
                                <small class="d-block text-muted">库存预警</small>
                                <span class="fw-bold text-danger" th:text="${overview.product.lowStock}">0</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 订单统计 -->
                <div class="col-6 col-md-3">
                    <div class="stats-card bg-warning bg-opacity-10">
                        <div class="icon bg-warning bg-opacity-25 text-warning">
                            <i class="bi bi-cart"></i>
                        </div>
                        <h3 class="value" th:text="${overview.order.total}">0</h3>
                        <p class="label">总订单数</p>
                        <div class="d-flex justify-content-between mt-3">
                            <div>
                                <small class="d-block text-muted">今日订单</small>
                                <span class="fw-bold text-warning" th:text="${overview.order.today}">0</span>
                            </div>
                            <div>
                                <small class="d-block text-muted">待处理</small>
                                <span class="fw-bold text-warning" th:text="${overview.order.pending + overview.order.processing}">0</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 销售统计 -->
                <div class="col-6 col-md-3">
                    <div class="stats-card bg-danger bg-opacity-10">
                        <div class="icon bg-danger bg-opacity-25 text-danger">
                            <i class="bi bi-currency-yen"></i>
                        </div>
                        <h3 class="value" th:text="${#numbers.formatDecimal(overview.sales.total, 0, 'COMMA', 2, 'POINT')}">0.00</h3>
                        <p class="label">总销售额</p>
                        <div class="d-flex justify-content-between mt-3">
                            <div>
                                <small class="d-block text-muted">今日销售</small>
                                <span class="fw-bold text-danger" th:text="${#numbers.formatDecimal(overview.sales.today, 0, 'COMMA', 2, 'POINT')}">0.00</span>
                            </div>
                            <div>
                                <small class="d-block text-muted">本月销售</small>
                                <span class="fw-bold text-danger" th:text="${#numbers.formatDecimal(overview.sales.monthly, 0, 'COMMA', 2, 'POINT')}">0.00</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图表区域 -->
            <div class="row g-3">
                <!-- 销售趋势图 -->
                <div class="col-md-8">
                    <div class="dashboard-card">
                        <div class="chart-card-header">
                            <h5><i class="bi bi-graph-up text-primary me-2"></i>销售趋势</h5>
                        </div>
                        <div class="chart-card-body">
                            <div class="chart-container">
                                <canvas id="salesTrendChart"></canvas>
                                <div class="loading-overlay" id="salesTrendLoading">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="visually-hidden">加载中...</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 订单状态分布 -->
                <div class="col-md-4">
                    <div class="dashboard-card">
                        <div class="chart-card-header">
                            <h5><i class="bi bi-pie-chart text-success me-2"></i>订单状态分布</h5>
                        </div>
                        <div class="chart-card-body">
                            <div class="chart-container">
                                <canvas id="orderStatusChart"></canvas>
                                <div class="loading-overlay" id="orderStatusLoading">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="visually-hidden">加载中...</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 分类销售占比 -->
                <div class="col-md-6">
                    <div class="dashboard-card">
                        <div class="chart-card-header">
                            <h5><i class="bi bi-diagram-3 text-warning me-2"></i>分类销售占比</h5>
                        </div>
                        <div class="chart-card-body">
                            <div class="chart-container">
                                <canvas id="categorySalesChart"></canvas>
                                <div class="loading-overlay" id="categorySalesLoading">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="visually-hidden">加载中...</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 用户增长趋势 -->
                <div class="col-md-6">
                    <div class="dashboard-card">
                        <div class="chart-card-header">
                            <h5><i class="bi bi-person-plus text-info me-2"></i>用户增长趋势</h5>
                        </div>
                        <div class="chart-card-body">
                            <div class="chart-container">
                                <canvas id="userGrowthChart"></canvas>
                                <div class="loading-overlay" id="userGrowthLoading">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="visually-hidden">加载中...</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 热门商品榜 -->
                <div class="col-md-12">
                    <div class="dashboard-card">
                        <div class="chart-card-header">
                            <h5><i class="bi bi-trophy text-danger me-2"></i>热门商品排行</h5>
                        </div>
                        <div class="chart-card-body">
                            <div class="row" id="hotProductsList">
                                <!-- 热门商品列表，通过JavaScript加载 -->
                                <div th:if="${hotProducts != null && !hotProducts.empty}">
                                    <div class="row">
                                        <div class="col-md-3" th:each="product : ${hotProducts}">
                                            <div class="hot-product-item">
                                                <img th:src="${product.image}" th:alt="${product.name}" class="hot-product-image">
                                                <div class="hot-product-info">
                                                    <div class="hot-product-name" th:text="${product.name}">商品名称</div>
                                                    <div class="hot-product-price">¥<span th:text="${#numbers.formatDecimal(product.price, 0, 'COMMA', 2, 'POINT')}">0.00</span></div>
                                                </div>
                                                <div class="hot-product-sales">
                                                    <i class="bi bi-graph-up text-success"></i> <span th:text="${product.sales}">0</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 加载状态 -->
                                <div class="col-12 text-center py-4" id="hotProductsLoading">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="visually-hidden">加载中...</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script th:fragment="script">
        // 加载中标志
        function showLoading(elementId) {
            document.getElementById(elementId).style.display = 'flex';
        }
        
        function hideLoading(elementId) {
            document.getElementById(elementId).style.display = 'none';
        }
        
        // 销售趋势图
        let salesTrendChart;
        function initSalesTrendChart(data) {
            const ctx = document.getElementById('salesTrendChart').getContext('2d');
            
            // 销毁已存在的图表
            if (salesTrendChart) {
                salesTrendChart.destroy();
            }
            
            salesTrendChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: data.dates,
                    datasets: [
                        {
                            label: '销售额',
                            data: data.sales,
                            borderColor: '#0d6efd',
                            backgroundColor: 'rgba(13, 110, 253, 0.1)',
                            borderWidth: 2,
                            fill: true,
                            tension: 0.4,
                            yAxisID: 'y'
                        },
                        {
                            label: '订单数',
                            data: data.orders,
                            borderColor: '#ffc107',
                            borderWidth: 2,
                            borderDash: [5, 5],
                            fill: false,
                            tension: 0.4,
                            yAxisID: 'y1'
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false
                        }
                    },
                    scales: {
                        y: {
                            type: 'linear',
                            display: true,
                            position: 'left',
                            title: {
                                display: true,
                                text: '销售额 (元)'
                            }
                        },
                        y1: {
                            type: 'linear',
                            display: true,
                            position: 'right',
                            title: {
                                display: true,
                                text: '订单数'
                            },
                            grid: {
                                drawOnChartArea: false
                            }
                        }
                    }
                }
            });
        }
        
        // 订单状态分布图
        let orderStatusChart;
        function initOrderStatusChart(data) {
            const ctx = document.getElementById('orderStatusChart').getContext('2d');
            
            // 销毁已存在的图表
            if (orderStatusChart) {
                orderStatusChart.destroy();
            }
            
            // 定义状态名称和颜色
            const statusLabels = {
                'unpaid': '未付款',
                'paid': '已付款',
                'shipped': '已发货',
                'completed': '已完成',
                'canceled': '已取消'
            };
            
            const statusColors = {
                'unpaid': '#ffc107',
                'paid': '#0d6efd',
                'shipped': '#6f42c1',
                'completed': '#198754',
                'canceled': '#dc3545'
            };
            
            // 准备数据
            const labels = [];
            const values = [];
            const colors = [];
            
            for (const [key, value] of Object.entries(data)) {
                if (value > 0) {  // 只显示有数据的状态
                    labels.push(statusLabels[key]);
                    values.push(value);
                    colors.push(statusColors[key]);
                }
            }
            
            orderStatusChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: labels,
                    datasets: [{
                        data: values,
                        backgroundColor: colors,
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                            labels: {
                                boxWidth: 12,
                                font: {
                                    size: 11
                                }
                            }
                        }
                    }
                }
            });
        }
        
        // 分类销售占比图
        let categorySalesChart;
        function initCategorySalesChart(data) {
            const ctx = document.getElementById('categorySalesChart').getContext('2d');
            
            // 销毁已存在的图表
            if (categorySalesChart) {
                categorySalesChart.destroy();
            }
            
            // 准备数据
            const labels = [];
            const values = [];
            const backgroundColors = [
                '#0d6efd', '#6f42c1', '#198754', '#ffc107', 
                '#dc3545', '#fd7e14', '#20c997', '#0dcaf0'
            ];
            
            // 确保我们有足够的颜色
            while (backgroundColors.length < data.length) {
                backgroundColors.push(...backgroundColors);
            }
            
            // 排序数据并提取前7个，其他合并为"其他"
            const sortedData = [...data].sort((a, b) => b.sales - a.sales);
            let otherSales = 0;
            
            for (let i = 0; i < sortedData.length; i++) {
                if (i < 7) {
                    labels.push(sortedData[i].category);
                    values.push(sortedData[i].sales);
                } else {
                    otherSales += parseFloat(sortedData[i].sales);
                }
            }
            
            // 如果有"其他"分类，添加它
            if (otherSales > 0) {
                labels.push('其他');
                values.push(otherSales);
            }
            
            categorySalesChart = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: labels,
                    datasets: [{
                        data: values,
                        backgroundColor: backgroundColors.slice(0, labels.length),
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                            labels: {
                                boxWidth: 12,
                                font: {
                                    size: 11
                                }
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.raw || 0;
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const percentage = Math.round((value / total) * 100);
                                    return `${label}: ￥${value.toFixed(2)} (${percentage}%)`;
                                }
                            }
                        }
                    }
                }
            });
        }
        
        // 用户增长趋势图
        let userGrowthChart;
        function initUserGrowthChart(data) {
            const ctx = document.getElementById('userGrowthChart').getContext('2d');
            
            // 销毁已存在的图表
            if (userGrowthChart) {
                userGrowthChart.destroy();
            }
            
            userGrowthChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: data.dates,
                    datasets: [
                        {
                            label: '总用户数',
                            data: data.totalUsers,
                            borderColor: '#0d6efd',
                            backgroundColor: 'rgba(13, 110, 253, 0.1)',
                            borderWidth: 2,
                            fill: true,
                            tension: 0.4,
                            yAxisID: 'y'
                        },
                        {
                            label: '新增用户',
                            data: data.newUsers,
                            borderColor: '#20c997',
                            backgroundColor: 'rgba(32, 201, 151, 0.1)',
                            borderWidth: 2,
                            fill: true,
                            tension: 0.4,
                            yAxisID: 'y1'
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false
                        }
                    },
                    scales: {
                        y: {
                            type: 'linear',
                            display: true,
                            position: 'left',
                            title: {
                                display: true,
                                text: '总用户数'
                            },
                            beginAtZero: true
                        },
                        y1: {
                            type: 'linear',
                            display: true,
                            position: 'right',
                            title: {
                                display: true,
                                text: '新增用户'
                            },
                            beginAtZero: true,
                            grid: {
                                drawOnChartArea: false
                            }
                        }
                    }
                }
            });
        }
        
        // 加载热门商品列表
        function loadHotProducts() {
            showLoading('hotProductsLoading');
            
            $.ajax({
                url: '/admin/statistics/hot-products',
                type: 'GET',
                data: { limit: 8 },
                success: function(res) {
                    hideLoading('hotProductsLoading');
                    
                    if (res.code === 0 && res.data) {
                        renderHotProducts(res.data);
                    } else {
                        showErrorMessage('hotProductsList', '加载热门商品失败: ' + (res.msg || '未知错误'));
                    }
                },
                error: function(xhr, status, error) {
                    hideLoading('hotProductsLoading');
                    showErrorMessage('hotProductsList', '请求失败: ' + error);
                }
            });
        }
        
        // 渲染热门商品列表
        function renderHotProducts(products) {
            if (!products || products.length === 0) {
                showErrorMessage('hotProductsList', '暂无热门商品数据');
                return;
            }
            
            let html = '<div class="row">';
            
            products.forEach(product => {
                html += `
                    <div class="col-md-3 mb-3">
                        <div class="hot-product-item">
                            <img src="${product.image}" alt="${product.name}" class="hot-product-image">
                            <div class="hot-product-info">
                                <div class="hot-product-name">${product.name}</div>
                                <div class="hot-product-price">¥${parseFloat(product.price).toFixed(2)}</div>
                            </div>
                            <div class="hot-product-sales">
                                <i class="bi bi-graph-up text-success"></i> ${product.sales}
                            </div>
                        </div>
                    </div>
                `;
            });
            
            html += '</div>';
            document.getElementById('hotProductsList').innerHTML = html;
        }
        
        // 显示错误消息
        function showErrorMessage(containerId, message) {
            const html = `
                <div class="col-12 text-center py-4">
                    <div class="text-danger">
                        <i class="bi bi-exclamation-triangle-fill fs-4"></i>
                        <p class="mt-2">${message}</p>
                    </div>
                </div>
            `;
            document.getElementById(containerId).innerHTML = html;
        }
        
        // 加载图表数据
        function loadChartData(days) {
            // 加载销售趋势
            showLoading('salesTrendLoading');
            $.ajax({
                url: '/admin/statistics/sales-trend',
                type: 'GET',
                data: { days: days },
                success: function(res) {
                    hideLoading('salesTrendLoading');
                    if (res.code === 0 && res.data) {
                        initSalesTrendChart(res.data);
                    } else {
                        showErrorMessage('salesTrendChart', '加载销售趋势失败: ' + (res.msg || '未知错误'));
                    }
                },
                error: function(xhr, status, error) {
                    hideLoading('salesTrendLoading');
                    showErrorMessage('salesTrendChart', '请求失败: ' + error);
                }
            });
            
            // 加载订单状态分布
            showLoading('orderStatusLoading');
            $.ajax({
                url: '/admin/statistics/order-status',
                type: 'GET',
                success: function(res) {
                    hideLoading('orderStatusLoading');
                    if (res.code === 0 && res.data) {
                        initOrderStatusChart(res.data);
                    } else {
                        showErrorMessage('orderStatusChart', '加载订单状态分布失败: ' + (res.msg || '未知错误'));
                    }
                },
                error: function(xhr, status, error) {
                    hideLoading('orderStatusLoading');
                    showErrorMessage('orderStatusChart', '请求失败: ' + error);
                }
            });
            
            // 加载分类销售占比
            showLoading('categorySalesLoading');
            $.ajax({
                url: '/admin/statistics/category-sales',
                type: 'GET',
                success: function(res) {
                    hideLoading('categorySalesLoading');
                    if (res.code === 0 && res.data) {
                        initCategorySalesChart(res.data);
                    } else {
                        showErrorMessage('categorySalesChart', '加载分类销售占比失败: ' + (res.msg || '未知错误'));
                    }
                },
                error: function(xhr, status, error) {
                    hideLoading('categorySalesLoading');
                    showErrorMessage('categorySalesChart', '请求失败: ' + error);
                }
            });
            
            // 加载用户增长趋势
            showLoading('userGrowthLoading');
            $.ajax({
                url: '/admin/statistics/user-growth',
                type: 'GET',
                data: { days: days },
                success: function(res) {
                    hideLoading('userGrowthLoading');
                    if (res.code === 0 && res.data) {
                        initUserGrowthChart(res.data);
                    } else {
                        showErrorMessage('userGrowthChart', '加载用户增长趋势失败: ' + (res.msg || '未知错误'));
                    }
                },
                error: function(xhr, status, error) {
                    hideLoading('userGrowthLoading');
                    showErrorMessage('userGrowthChart', '请求失败: ' + error);
                }
            });
            
            // 加载热门商品
            loadHotProducts();
        }
        
        // 初始化仪表盘
        document.addEventListener('DOMContentLoaded', function() {
            // 加载图表数据
            loadChartData(7); // 默认加载7天数据
            
            // 时间范围选择
            document.getElementById('timeRangeSelect').addEventListener('change', function() {
                const days = parseInt(this.value);
                loadChartData(days);
            });
            
            // 刷新按钮
            document.getElementById('refreshDashboard').addEventListener('click', function() {
                const days = parseInt(document.getElementById('timeRangeSelect').value);
                loadChartData(days);
            });
        });
    </script>
</body>
</html> 